<template>
	<view class="cu-modal bottom-modal" :class="couponModal?'show':''" @tap="hideModal">
		<view class="cu-dialog" style="background-color:#f5f5f5 ;height: 65%;" @tap.stop>
			<view class="cu-bar bg-white justify-end">
				<view class="content">选择优惠券</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<scroll-view scroll-y scroll-with-animation style="max-height: 66vh;">
				<checkbox-group class="block">
					<view v-for="(item,index) in couponUserList" class="cu-list menu" style="margin-top: 0rpx;">
						<view style="background-color:#f5f5f5;padding: 0rpx;">
							<view class="item">
								<view>
									<view class="content">
										<view class="page-group">
											<text class="fold-page"></text>
											<text class="page">{{item.couponInfo.couponType =='1' ?'满减券' :'折扣券'}}</text>
										</view>
										<text class="dot-left"></text>
										<text class="dot-right"></text>
										<view class="coupon-detail">
											<view v-if="item.couponInfo.couponType =='2'">
												<text>{{item.couponInfo.discount}}</text>
												<text>折</text>
											</view>
											<view v-else-if="item.couponInfo.couponType =='1'">
												<text>{{item.couponInfo.amount}}</text>
												<text>元</text>
											</view>
											<view>
												<view class="text-bold text-black text-sm">
													{{item.couponInfo.threshold >0? '订单满'+item.couponInfo.threshold+'可以使用' :'无门槛优惠券'}}
												</view>
												<view class="text-black text-sm">
													{{item.couponInfo.useRange =='1' ? '全部商品可用' :'指定商品可用'}}
												</view>
												<view>
													<view class="text-xs margin-tb-sm">
														有效期至{{item.couponInfo.receiveEndedAt}}
													</view>
												</view>
											</view>
											<view>
												<checkbox-group class="block" @change="onCoupon">
													<checkbox class="round"
														:disabled="orderInfo.totalPrice<item.couponInfo.threshold"
														:class="checkedCouponUserId == item.id? theme.themeColor+' checked':''"
														:checked="checkedCouponUserId==item.id" :value="item.id">
													</checkbox>
												</checkbox-group>
											</view>

										</view>
									</view>
									<view class="padding-lr padding-tb-xs">
										<view v-if="orderInfo.totalPrice<item.couponInfo.threshold" class="text-red">
											{{'订单未满'+item.couponInfo.threshold+'元，无法使用'}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</scroll-view>
			<view class="cu-tabbar-height"></view>
			<view class="cu-bar btn-group bg-white tabbar shop foot">
				<button class="cu-btn shadow-blur round lg" :class="'bg-'+theme.themeColor" @tap="onsubmit">
					确 认</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			couponUserList: {
				type: Array,
				default: () => []
			},

			orderInfo: {
				type: Object,
				default: () => {}
			},
			couponModal: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				theme: getApp().globalData.theme,
				checkedCouponUserId: ''
			}
		},
		methods: {
			onCoupon(e) {
				this.checkedCouponUserId = e.detail.value[0];
			},
			hideModal() {
				this.$emit('changeCouponModal', false);
			},
			onsubmit() {
				let that = this;
				let couponUser = this.couponUserList.find(function(e) {
					return e.id === that.checkedCouponUserId
				})
				this.$emit('changeOneCoupon', couponUser);
				this.hideModal();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.item {
		overflow: hidden;
		margin: 10px;
		padding-left: 2px;
		position: relative;

	}

	.item>view {
		background: #fff;
		border-radius: 5px;
	}

	.item .dot-left,
	.item .dot-right {
		display: block;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #f5f5f5;
		position: absolute;
		z-index: 999;
	}

	.item .dot-left {
		bottom: -6px;
		left: -6px;
	}

	.item .dot-right {
		bottom: -6px;
		right: -6px;
	}

	.item .page-group {
		position: absolute;
		top: 10px;
		left: -2px;
		width: 100%;
		max-width: 120px;
	}

	.item .page-group .fold-page {
		display: block;
		width: 2px;
		height: 5px;
		background: #db0113;
		transform: skewY(-40deg);
		position: absolute;
		top: -1px;
		left: 0;
		z-index: 0;
	}

	.item .page-group .page {
		position: absolute;
		z-index: 1;
		display: block;
		padding: 0 10px;
		height: 20px;
		background: linear-gradient(137deg, #ff5b5b 0%, #db0113 100%);
		border-radius: 0 20px 20px 0;
		color: #fff;
		text-align: center;
		font-size: 12px;
		overflow: hidden;
	}

	.item .content {
		width: 100%;
		height: 90px;
		border-bottom: 1px dotted #f5f5f5;
		position: relative;
		z-index: 2;
	}

	.item .content .coupon-detail {
		display: flex;
		justify-content: space-between;
		padding: 0 15px 0 20px;
	}

	.item .content .coupon-detail>view {
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item .content .coupon-detail>view:first-child {
		color: #e21422;
		padding-top: 20px;
		width: 30%;
	}

	.item .content .coupon-detail>view:first-child>text:first-child {
		font-size: 28px;
	}

	.item .content .coupon-detail>view:first-child>text:last-child {
		font-size: 16px;
		padding: 9px 0 0;
	}

	.item .content .coupon-detail>view:last-child>view {
		color: #dd0d1f;
		border: 1px solid #dd0d1f;
		border-radius: 20px;
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 76px;
		height: 22px;
	}

	.item .coupon-detail>view:nth-child(2) {
		flex-direction: column;
		padding-top: 5px;
	}

	.item .coupon-detail>view:nth-child(2)>view {
		width: 100%;
	}

	.item .ribbon {
		width: 80px;
		height: 20px;
		background: #dd0d1f;
		position: absolute;
		right: -20px;
		top: 10px;
		transform: rotateZ(45deg);
		text-align: center;
		color: #fff;
		font-size: 12px;
	}
</style>
